<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">系统日志</div>

    <!-- 搜索框 -->
    <el-form ref="form" :model="form" label-width="80px">
      <div class="el-form-item-multi clearfix">
        <el-row :gutter="15">
          <el-col :span="18">
            <el-form-item label="时间范围">
              <el-col :span="11">
                <el-date-picker type="datetime" value-format="timestamp" placeholder="开始日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="1">-</el-col>
              <el-col :span="11">
                <el-date-picker type="datetime" @change="dateChangeEndTime" value-format="timestamp" placeholder="结束日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查 询</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <!-- 列表 -->
    <el-table :data="tableData" stripe border class="el-table-body" v-if="showList">
      <el-table-column label="编号" type="index" width="50" align="center">
      </el-table-column>
      <el-table-column prop="username" label="用户" align="center" width="200">
      </el-table-column>
      <el-table-column prop="ip" label="IP" align="center" width="260">
      </el-table-column>
      <el-table-column prop="operation" label="操作内容" align="center">
      </el-table-column>
      <el-table-column prop="createDate" label="操作时间" align="center" width="200">
      </el-table-column>
    </el-table>

    <el-pagination background @current-change="changeEventTable" :current-page.sync="form.page" :page-size="form.limit" layout="total, prev, pager, next,jumper" :total="totalCount" class="el-page-body" v-if="showList">
    </el-pagination>

  </div>
</template>

<script>

export default {
  name: 'systemLogsSearch',
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      form: {
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        page: 1,
        limit: 10
      },
      totalCount: 0, // 总数
      tableData: [], // 列表数据
      showList: true
    }
  },

  // 监听路由进入
  // beforeRouteLeave (to, from, next) {
  //   if (to.name !== 'eventSearchDetail') {
  //     this.$store.commit('keepOut')
  //   }
  //   next()
  // },
  // beforeRouteEnter (to, from, next) {
  //   next((vm) => {
  //     vm.$store.commit('keepIn', 'eventSearch')
  //   })
  // },

  mounted: function () {
    this.init()
  },

  methods: {
    // 监测结束时间
    dateChangeEndTime () {
      let startTime = this.form.startTime
      let endTime = this.form.endTime
      if (startTime > endTime) {
        this.$message({
          type: 'warning',
          message: '结束时间必须大于开始时间！'
        })
        this.form.endTime = ''
      }
    },
    // 日期转时间戳
    timeToStamp (time) {
      let d = new Date(time)
      let stamp = d.getTime()
      return stamp
    },
    // 页面初始方法
    init () {
      let userInfoRes = JSON.parse(this.$base.getSessionStorage('userInfo'))
      let currentUserRole = userInfoRes.userRole
      if (currentUserRole !== 1) {
        this.refreshTable()
      } else {
        this.showList = false
      }
    },
    // 所属变化时
    onAreaChange (val) {
      this.form.areaID = val
    },
    onSceneChange (val) {
      this.form.modType = val
    },
    onSubmit () {
      this.form.page = 1

      this.refreshTable()
      // this.$router.replace({name: 'eventSearch', query: this.form})
    },
    // 切换页码
    changeEventTable: function (val) {
      this.form.page = val
      this.refreshTable()
      // this.$router.replace({name: 'eventSearch', query: this.form})
    },
    // 拉取表格信息
    refreshTable: function () {
      this.showList = true
      let _this = this
      let url = this.$base.getUrl('systemLog')
      let params = {
        url: url,
        data: this.form,
        isJson: true
      }
      this.$store.dispatch('postForm', params).then((res) => {
        let data = res.page
        if (data.list) {
          _this.tableData = data.list
        } else {
          _this.tableData = []
        }

        _this.totalCount = data.totalCount
      })
    },
    // 查看详情
    viewDetail: function (row) {
      this.$router.push({
        name: 'eventSearchDetail',
        query: {
          'eventSysId': row.eventSysId
        }
      })
    },
    // 消音
    handleCloseVoice (equipmentId) {
      let url = this.$base.getUrl('jiaCancelSmoke')
      let params = {
        url: url,
        data: {
          equipmentId: equipmentId
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '消音成功!'
          })
        }
      })
    },
    handleEventOperate (eventSysId, eventState, equipmentId) {
      let url = this.$base.getUrl('jiaEventOperate')
      let params = {
        url: url,
        data: {
          eventSysId: eventSysId,
          eventState: eventState.toString()
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        if (res.code === 0) {
          this.refreshTable()
          this.$message({
            type: 'success',
            message: '处理成功!'
          })
          this.handleCloseVoice(equipmentId)
        }
      })
    },
    // 事件处理
    disposeEvent (row) {
      console.log(row)
      this.$confirm('如何处理该事件?', {
        distinguishCancelAndClose: true,
        confirmButtonText: '处理',
        cancelButtonText: '误报'
      }).then(() => {
        this.handleEventOperate(row.eventSysId, '1', row.equipmentId)
      }).catch((action) => {
        console.log(action)
        if (action === 'cancel') {
          this.handleEventOperate(row.eventSysId, '2', row.equipmentId)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-table {
  width: auto !important;
  text-align: center;
  margin: 10px;
}

.el-table >>> th {
  text-align: center;
}

.el-pagination {
  margin: 0 10px;
}
</style>
